<template>
    <div id="claims">
        <h1>理赔列表</h1>
        <el-table :data="claimsListData" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                    >
                        <el-form-item label="ID">
                            <span>{{ props.row._id }}</span>
                        </el-form-item>
                        <el-form-item label="所属订单">
                            <span>{{ props.row.ordersId._id }}</span>
                        </el-form-item>
                        <el-form-item label="所属用户">
                            <span>{{ props.row.ordersId.usersId.name }}</span>
                        </el-form-item>
                        <el-form-item label="投保经理">
                            <span>{{
                                props.row.ordersId.personalId.names
                            }}</span>
                        </el-form-item>
                        <el-form-item label="申请时间">
                            <span>{{ props.row.applyTime }}</span>
                        </el-form-item>
                        <el-form-item label="处理时间">
                            <span>{{ props.row.handleTime }}</span>
                        </el-form-item>
                        <el-form-item label="理赔状态">
                            <span>{{ props.row.state }}</span>
                        </el-form-item>
                        <el-form-item label="事故时间">
                            <span>{{ props.row.accidentTime }}</span>
                        </el-form-item>
                        <el-form-item label="相关图片">
                            <!-- <span>{{ props.row.images }}</span> -->
                            <template v-for="item in props.row.images">
                                <img
                                    :src="
                                        'http://localhost:3000/images/' + item
                                    "
                                    alt=""
                                    :key="item"
                                />
                            </template>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="ID" prop="_id"> </el-table-column>
            <el-table-column label="申请时间" prop="applyTime">
            </el-table-column>
            <el-table-column label="申请状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state === 1" style="color: orange">{{
                        claimsState(scope.row.state)
                    }}</span>
                    <span v-if="scope.row.state === 2" style="color: green">{{
                        claimsState(scope.row.state)
                    }}</span>
                    <span v-if="scope.row.state === 3" style="color: red">{{
                        claimsState(scope.row.state)
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="所属订单">
                <template slot-scope="scope">
                    <span>{{ scope.row.ordersId._id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="所属用户">
                <template slot-scope="scope">
                    <span>{{ scope.row.ordersId.usersId.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="myGetClaimsById(scope.row._id)"
                        v-if="scope.row.state !== 2"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        @click="myGetClaimsById(scope.row._id)"
                        v-if="scope.row.state === 2"
                        disabled
                        >已完成</el-button
                    >
                    <el-button
                        size="mini"
                        @click="myAgainReapply(scope.row._id)"
                        v-if="scope.row.state === 3"
                        >重新申请</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="delClaims(scope.row._id)"
                        v-if="scope.row.state !== 3"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <span class="demonstration"><br /></span>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="2"
                layout="sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 分页 -->
        <!-- 修改理赔弹窗 -->
        <el-dialog
            :visible.sync="dialogVisible1"
            width="60%"
            :before-close="handleClose"
        >
            <h1>修改理赔</h1>
            <div>
                <label for="">理赔订单ID：</label>
                <el-input
                    placeholder="请输入内容"
                    v-model="updateClaimsData._id"
                    disabled
                ></el-input>
            </div>
            <div>
                <label for="">保险订单ID：</label>
                <el-input v-model="updateClaimsData.ordersId" disabled>
                </el-input>
            </div>
            <div>
                <label for="">申请理赔时间：</label>
                <el-input
                    placeholder="请输入内容"
                    v-model="updateClaimsData.applyTime"
                ></el-input>
            </div>
            <div>
                <label for="">理赔处理时间：</label>
                <el-input
                    placeholder="请输入内容"
                    v-model="updateClaimsData.handleTime"
                ></el-input>
            </div>
            <div>
                <label for="">事故时间：</label>
                <el-input
                    placeholder="请输入内容"
                    v-model="updateClaimsData.accidentTime"
                ></el-input>
            </div>
            <!-- 饿了么ui图片上传 -->
            <div>
                <label for="">添加更多图片：</label>
                <el-upload
                    action="http://localhost:3000/images/uploadImages"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible1 = false"
                    >取 消</el-button
                >
                <el-button
                    size="mini"
                    type="primary"
                    @click="myUpdate(updateClaimsData)"
                    >确认</el-button
                >
            </span>
        </el-dialog>
        <!-- 修改理赔弹窗 -->
    </div>
</template>

<script>
//引入状态机辅助函数
import { createNamespacedHelpers } from "vuex";
// 拿到 理赔分仓 进行操作
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
    "claims"
);
export default {
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: "",
            dialogVisible1: false,
        };
    },
    computed: {
        ...mapState(["claimsListData", "updateClaimsData", "total", "pages"]),
    },
    mounted() {
        this.getClaims();
    },
    watch: {
        //当监听到 updateClaimsData 数据变化调用setUpdateClaimsData
        updateClaimsData: {
            handler(newd) {
                this.setUpdateClaimsData(newd);
            },
            deep: true,
        },
    },
    methods: {
        ...mapMutations([
            "setUpdateClaimsData",
            "setPageSize",
            "setCurrentPage",
        ]),
        ...mapActions([
            "getClaims",
            "deleteClaims",
            "getClaimsById",
            "updateClaims",
            "againReapply",
        ]),
        handleRemove(file, fileList) {
            this.updateClaimsData.images.forEach((element, index) => {
                if (element.search(file.name) != -1) {
                    console.log(index);
                    this.updateClaimsData.images.splice(index, 1);
                }
            });
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response) {
            if (response.code) {
                this.updateClaimsData.images.push(response.data);
            }
        },
        //修改弹窗
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        async delClaims(id) {
            let data = await this.deleteClaims(id);
            if (data.code) {
                this.getClaims();
            }
        },
        myGetClaimsById(id) {
            this.dialogVisible1 = true;
            this.getClaimsById(id);
        },
        //失败后变更状态
        myAgainReapply(id) {
            this.$message({
                message: "恭喜你，重新申请成功",
                type: "success",
            });
            this.againReapply(id);
        },
        myUpdate(data) {
            this.dialogVisible1 = false;
            this.updateClaims(data);
        },
        //分页
        handleSizeChange(val) {
            this.setPageSize(val);
            this.getClaims();
        },
        handleCurrentChange(val) {
            this.setCurrentPage(val);
            this.getClaims();
        },
        //处理理赔订单申请状态
        claimsState(data) {
            switch (data) {
                case 1:
                    return "申请中";
                case 2:
                    return "申请成功";
                case 3:
                    return "申请失败";
            }
        },
    },
};
</script>

<style lang="scss" scope>
#claims {
    h1 {
        line-height: 50px;
        margin-left: 30px;
    }
    .el-button--mini {
        font-size: 14px;
    }
    .el-table .cell {
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 50px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .el-form {
        width: 1069px;
        height: 385px;
        margin: 0px auto;
        border: 1px solid gainsboro;
        padding: 50px 50px;
    }
    .el-form-item__label {
        text-align: left;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
        margin-left: 30px;
        width: 100px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    //弹窗
    .el-dialog {
        position: relative;
        margin: 0 auto;
        width: 1000px;
        background: #ffffff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
        width: 50%;
        .el-dialog__body {
            padding: 30px 20px;
            color: #606266;
            font-size: 14px;
            word-break: break-all;
            .el-input__inner {
                margin-bottom: 20px;
                padding-left: 10px;
            }
        }
    }
    img {
        margin-right: 5px;
        width: 100px;
    }
}
</style>